import React, { useState, useEffect } from "react";

import { List, InputItem, WhiteSpace, Toast } from "antd-mobile";
import Button from "../../../components/button";
import AgreeItem from "../../../components/agreeItem";
import "./index.scss";

const pattern = {
	idCard: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
	userName: /^[\u4e00-\u9fa5]{2,12}$/,
	address: /^[\u4e00-\u9fa5]{2,50}$/
};

const Form = props => {
	const [checked, setChecked] = useState(false);
	const {
		history,
		values,
		onClick,
		disabled,
		isHiddenBotton,
		getFieldProps,
		getFieldError,
		validateFields,
		setFieldsValue
	} = props;

	useEffect(() => {
		if (values) {
			setFieldsValue(values);
		}
	}, [values]);
	const checkCredit = () => {
		history.push({
			pathname: "/personalCreditAuthorization",
			params: {}
		});
	};
	// const validator = (rules, value, callback) => {
	// 	value = value.replace(/\s*/g, "");
	// 	if (rules.required && !value.length) {
	// 		return callback(`${rules.field} is required`);
	// 	}

	// 	if (rules.pattern && !rules.pattern.test(value)) {
	// 		return callback(rules.message);
	// 	}

	// 	callback();
	// };
	const onErrorClick = name => {
		const message = getFieldError(name).join("、");
		Toast.fail(message);
	};
	const fieldPropsMap = {
		userName: {
			rules: [
				{
					required: true,
					message: "姓名格式不正确",
					pattern: pattern.userName
				}
			]
		},
		address: {
			rules: [
				{
					required: true,
					message: "身份证住址不能为空"
				}
			]
		},
		cardEndTime: {
			rules: [{ required: true, message: "证件截止时间不能为空" }]
		},
		cardStartTime: {
			rules: [{ required: true, message: "证件起始时间不能为空" }]
		},
		idNo: {
			rules: [
				{
					required: true,
					message: "身份证号格式不正确",
					pattern: pattern.idCard
				}
			]
		}
	};
	const submitHandle = () => {
		validateFields((err, values) => {
			if (!err) {
				if (!checked) {
					return Toast.info("请先勾选协议", 2);
				}
				onClick(values);
			}
		});
	};
	const checkedHandle = e => {
		setChecked(e.target.checked);
	};
	const disabledClick = () => {
		if (!checked) {
			return Toast.info("请先勾选协议", 2);
		}
		onClick();
	};
	return (
		<div className="form-component-wrapper">
			<List>
				<InputItem
					{...getFieldProps("userName", fieldPropsMap.userName)}
					error={getFieldError("userName")}
					disabled={disabled}
					onErrorClick={() => onErrorClick("userName")}
				>
					姓名
				</InputItem>
				<InputItem
					{...getFieldProps("idNo", fieldPropsMap.idNo)}
					error={getFieldError("idNo")}
					disabled={disabled}
					onErrorClick={() => onErrorClick("idNo")}
				>
					身份证号
				</InputItem>
				<InputItem
					{...getFieldProps("address", fieldPropsMap.address)}
					error={getFieldError("address")}
					disabled={disabled}
					onErrorClick={() => onErrorClick("address")}
				>
					身份证住址
				</InputItem>
				<WhiteSpace size="lg" style={{ background: "#F6F6F6" }} />
				<InputItem
					{...getFieldProps("cardStartTime", fieldPropsMap.cardStartTime)}
					error={getFieldError("cardStartTime")}
					disabled={true}
					onErrorClick={() => onErrorClick("cardStartTime")}
				>
					证件起始时间
				</InputItem>
				<InputItem
					{...getFieldProps("cardEndTime", fieldPropsMap.cardEndTime)}
					error={getFieldError("cardEndTime")}
					disabled={true}
					onErrorClick={() => onErrorClick("cardEndTime")}
				>
					证件截止时间
				</InputItem>
			</List>
			<AgreeItem
				className="form-component-wrapper-checkbox"
				onChange={checkedHandle}
				onClick={checkCredit}
			>
				《个人征信授权书》
			</AgreeItem>
			<Button
				isHiddenBotton={isHiddenBotton}
				onClick={disabled ? disabledClick : submitHandle}
			>
				确认绑定
			</Button>
		</div>
	);
};
export default Form;
